<template>
  <div>
    <a-button type="primary" @click="showModal">码表引用</a-button>
    <a-modal v-model:visible="visible" title="码表引用" width="50%" style="text-align: center" :footer="null">
      <div style="display: flex; float: left; width: 300px">
        <p>码表选择 :</p>
        <a-select
          v-model:value="value"
          show-search
          placeholder="请选择"
          style="width: 200px"
          :options="options"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
        ></a-select>
      </div>
      <br />
      <br />
      <a-table :columns="columns" :data-source="data" size="middle" :pagination="false" />
      <div class="footer">
        <a-button type="dashed" @click="handleOk">取消</a-button>
        <a-button type="primary" style="margin-left: 10px" @click="handleOk">确认</a-button>
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import type { SelectProps } from 'ant-design-vue';
  import { getdataHook } from '@/hooks/InterfaceManagementHooks/getStopHook';
  const visible = ref<boolean>(false);
  const { dislog, dislog1 } = getdataHook();
  //展示弹窗
  const showModal = () => {
    visible.value = true;
  };

  const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
    dislog.value = true;
    dislog1.value = false;
  };
  //码值详情的数据
  const data = ref([
    {
      codeValueId: '1',
      codeValueKey: '200',
      codeValueName: '调用成功',
      codeValueMean: '接口调用成功',
    },
    {
      codeValueId: '2',
      codeValueKey: '411',
      codeValueName: '请求参数不匹配',
      codeValueMean: '请求参数不匹配，参数校验失败，请重新输入',
    },
    {
      codeValueId: '3',
      codeValueKey: '412',
      codeValueName: 'IP白名单校验失败',
      codeValueMean: 'IP白名单校验失败',
    },
  ]);
  //码值详情的相关信息
  const columns = [
    {
      title: '码值取值',
      dataIndex: 'codeValueKey',
      key: 'codeValueKey',
    },
    {
      title: '码值名称',
      dataIndex: 'codeValueName',
      key: 'codeValueKey',
    },
    {
      title: '码值含义',
      dataIndex: 'codeValueMean',
      key: 'codeValueKey',
    },
  ];
  const value = ref<string | undefined>(undefined);
  const options = ref<SelectProps['options']>([
    { value: '错误码码表1', label: '错误码码表1' },
    { value: '错误码码表2', label: '错误码码表2' },
    { value: '错误码码表3', label: '错误码码表3' },
  ]);
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const handleBlur = () => {
    console.log('blur');
  };
  const handleFocus = () => {
    console.log('focus');
  };
  const filterOption = (input: string, option: any) => {
    return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
</script>
<style>
  :deep(.ant-select-selection-item) {
    width: 300px;
  }
</style>
